<template>
	<view class="ikz-apply">
		<scroll-view scroll-y :style="{ height: windowHeight }" @scrolltolower="onreachBottom">
			<view class="mainbox">
				<view class="itembox" v-for="(i,k) in list" :key="k" @click="todetails(i)">
					<image :src="'https://1008.dev.jiangkukeji.cn'+i.logo_image"
						style="width: 170rpx;height: 170rpx;border-radius: 20rpx;" mode=""></image>
					<view class="ri-box">
						<view class="titlebox">
							<view class="titletxt">
								{{i.name}}
							</view>
							<!-- <image src="/static/mai/yyz.png" style="width: 86rpx;height: 33rpx;" mode=""></image> -->
							<view class="statustxt" v-if="i.business_status == 1">
								营业中
							</view>
							<view class="statustxt" v-if="i.business_status == 2">
								未营业
							</view>
						</view>

						<view class="shujubox">
							<view class="yue">
								月售{{i.sale_count}}
							</view>
							<view class="renjun">
								人均
							</view>
						</view>

						<view class="feiyongbox">
							<view class="qisong">
								起送￥{{i.lifting}}
							</view>
							<view class="peisong">
								配送费 ￥{{i.errand}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	var app = getApp( );
	import ikz from '@/pages/Common/tools.js';
	export default {
		components: {

		},
		data( ) {
			return {
				windowHeight: 0,
				id: 0,
				remPage: 1,
				list: [ ],
				size: 10
			}
		},
		onLoad( op ) {
			this.id = op.id
			console.log( this.id, 'id' );
			var _this = this
			uni.getSystemInfo( {
				success: function( res ) {
					_this.windowHeight = res.windowHeight - 10 + 'px';
					console.log( res, '屏幕高度' );
				}
			} )

			uni.setNavigationBarTitle( {
				title: op.title
			} );

		},
		onShow( ) {
			this.getRecommend( )
		},
		methods: {
			onreachBottom( e ) {
				console.log( e, 'eee' );
			},
			todetails( item ) {
				console.log( item, 'item' );
				uni.navigateTo( {
					url: '/pages/Component/Module/takeaway/apply/shangdetails/shangdetails?id='+item.id
				} )
			},
			// 获取推荐商家
			getRecommend( ) {
				var path = '/xyb/supermarket/index/businsess_list';
				var data = {
					business_category_id: this.id,
					page: this.remPage,
					limit: 10
				};
				ikz.requestPost( path, data, res => {
					console.log( res, 'ssssss' );
					if ( res.data.code == 1 ) {
						if ( this.remPage === 1 ) {
							// 第一页直接赋值
							this.list = res.data.data.data || [ ];
						} else {
							// 后续页数拼接数据
							this.list = [ ...this.list, ...( res.data.data.data || [ ] ) ];
						}
						// 如果没有数据了，显示提示
						if ( res.data.data.data.length < this.size ) {
							uni.showToast( {
								title: '没有更多数据了',
								icon: 'none'
							} );
						}
					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} )
			},
		}
	};
</script>

<style scoped lang="scss">
	.ikz-apply {
		width: 100%;
		height: 100vh;
		background: #F3F3F3;
		position: relative;
	}

	.mainbox {
		width: 100%;
		padding: 0 30rpx 30rpx 30rpx;
		box-sizing: border-box;

		.itembox {
			width: 672rpx;
			height: 206rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-bottom: 20rpx;
			padding: 20rpx 18rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.ri-box {
				width: 448rpx;
				height: 170rpx;

				.titlebox {
					width: 100%;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.titletxt {
						width: 366rpx;
						height: 40rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #222222;
						text-align: left;
					}

					.statustxt {
						width: 86rpx;
						height: 33rpx;
						text-align: center;
						line-height: 33rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #533200;
						background: linear-gradient( 139deg, #FFD8A4 0%, #CE943F 100%);
						border-radius: 6rpx 6rpx 6rpx 6rpx;
					}
				}

				.shujubox {
					width: 100%;
					height: 36rpx;
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.yue {
						font-weight: 400;
						font-size: 24rpx;
						color: #FF4F21;
						text-align: left;
						line-height: 36rpx;
					}

					.renjun {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						text-align: left;
						line-height: 36rpx;
						margin-left: 22rpx;
					}
				}

				.feiyongbox {
					width: 100%;
					height: 36rpx;
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.qisong {
						font-weight: 400;
						font-size: 24rpx;
						color: #222222;
						text-align: left;
						line-height: 36rpx;
					}

					.peisong {
						font-weight: 400;
						font-size: 24rpx;
						color: #222222;
						text-align: left;
						line-height: 36rpx;
						margin-left: 34rpx;
					}
				}
			}
		}

	}
</style>